<template>
  <page-header-wrapper :title="false">
    <a-card
      title="发票详情"
      :loading="loading"
    >
      <template slot="extra">
        <a-button v-if="expressData.voice_electronic_file != ''" icon="eye" size="small" type="primary" @click="download(expressData.voice_electronic_file)">查看发票</a-button>
        <a-button v-else disabled icon="eye" size="small" type="primary">暂未上传发票</a-button>
      </template>
      <a-divider orientation="left"><b>发票信息</b></a-divider>
      <a-alert :message="`您的发票申请，开票总额￥ ${invoiceDetail.amount}`" type="info" banner />
      <a-descriptions bordered :column="2" style="margin-top:10px">
        <a-descriptions-item label="发票状态">
          {{ invoiceDetail.status }}
        </a-descriptions-item>
        <a-descriptions-item label="发票类型">
          {{ invoiceDetail.invoice_type }}
        </a-descriptions-item>
        <a-descriptions-item label="发票抬头">
          {{ invoiceDetail.header }}
        </a-descriptions-item>
        <a-descriptions-item label="开票公司">
          {{ invoiceDetail.company }}
        </a-descriptions-item>
        <a-descriptions-item label="申请时间">
          {{ invoiceDetail.created_at }}
        </a-descriptions-item>
        <a-descriptions-item label="开票时间">
          {{ invoiceDetail.invoice_time }}
        </a-descriptions-item>
        <a-descriptions-item label="发票编号">
          {{ invoiceDetail.invoice_num }}
        </a-descriptions-item>
        <a-descriptions-item label="申请备注">
          {{ invoiceDetail.notes }}
        </a-descriptions-item>
        <a-descriptions-item label="审核信息">
          {{ invoiceDetail.remarks }}
        </a-descriptions-item>
      </a-descriptions>
      <a-divider orientation="left"><b>合同信息</b></a-divider>
      <a-table
        bordered
        :row-key="(record) => record.contract_id"
        :columns="contractColumn"
        :data-source="contractData"
      >
        <template slot="contract_no" slot-scope="text, record">
          <a-button type="link" @click="$router.push({ name: 'ContractDetail', params: { cid: record.contract_id } })">{{ text }}</a-button>
        </template>
        <template slot="tm_name" slot-scope="text, record">
          {{ text }}{{ record.pt_name }}
        </template>
        <template slot="phone1" slot-scope="text, record">
          {{ text }}<span v-if="record.phone2"> / {{ record.phone2 }}</span>
        </template>
        <template slot="amount" slot-scope="text, record">
          {{ record.amount }}
        </template>
      </a-table>
      <a-divider orientation="left"><b style="color: #1890ff">物流信息</b></a-divider>
      <a-descriptions bordered layout="vertical" :column="3" style="margin-top:10px">
        <a-descriptions-item label="物流公司">
          {{ expressData.express_name }}
        </a-descriptions-item>
        <a-descriptions-item label="物流单号">
          {{ expressData.express_num }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-modal v-model="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { getMyInvoiceDetail } from '@/api/invoice'
import col from '@/columns/invoice'

export default {
  name: 'InvoiceDetail',
  data () {
    return {
      contractColumn: col.contractColumn,
      invoiceDetail: {},
      contractData: [],
      expressData: {},
      loading: false,
      previewImage: '',
      previewVisible: false
    }
  },
  activated () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      this.loading = true
      getMyInvoiceDetail(this.$route.params.id).then(res => {
        this.invoiceDetail = res.result.invoiceData
        this.contractData = res.result.contractData
        this.expressData = res.result.invoiceInfo
        this.loading = false
      })
    },
    onExpress () {
      this.visible = true
    },
    onCancel () {
      this.visible = false
    },
    async handlePreview (file) {
      this.previewImage = file
      this.previewVisible = true
    },
    handleCancel ({ fileList }) {
      this.fileList = fileList
    },
    download (file) {
      window.open(file)
    }
  }
}
</script>

<style scoped>
/deep/ .ant-alert-message{
  font-size: 15px;
  font-weight: 700;
  color: rgb(245, 34, 45);
}
</style>
